<template>
	<view class="scope-container"
		:style="'min-height: 100vh; background: url(' + bgImage + '); background-size: 100% auto; background-position: 0 0;'">
		<!-- #ifndef H5 -->
		<TextNavBar :bgColor="titleBgColor" :title="info.title"></TextNavBar>
		<!-- #endif -->
		<!-- <TextNavBar :bgColor="titleBgColor" :title="info.title"></TextNavBar> -->

		<navigator url="/pages/rule/index?type=fudai">
			<image class="rule-btn" mode="widthFix" src="https://cdn2.hquesoft.com/box/fudai/rule.png"></image>
		</navigator>

		<navigator url="/pages/myBox/index">
			<image class="stock-btn" mode="widthFix" src="https://cdn2.hquesoft.com/box/fudai/stock.png"></image>
		</navigator>

		<view class="rank-btn" @tap="isShowRankList = true" v-if="config.is_show_rank">
			榜单
		</view>

		<navigator url="/pages/myScore/index">
			<view class="float-btn score-btn">
				<image src="https://cdn2.hquesoft.com/box/fudai/btn2.png" class="icon" mode="aspectFit"></image>
				<span>{{scoreAlias}}</span>
				<span>({{userInfo.score || 0}})</span>
			</view>
		</navigator>

		<!-- <view class="float-btn chip-btn">
			<image src="https://cdn2.hquesoft.com/box/fudai/btn.png" class="icon" mode="aspectFit"></image>
			<span>碎片</span>
		</view> -->

		<view class="box-image-c">
			<image :src="boxImage" class="box-image" mode="aspectFit"></image>
		</view>

		<view class="submit-btn" @tap="pay">
			<view class="discount-tips" v-if="discountTips">{{discountTips}}</view>
			<PriceDisplay :info="info"></PriceDisplay>
			<text style="margin-left: 10rpx;">开启福袋</text>
		</view>

		<view class="tips-c" style="opacity: 0;">
			未成年人必须在家长监督下使用
		</view>

		<view class="level-title">产出概率</view>
		<view class="level-list" :class="'list-' + info.level_total">
			<view class="item" :class="{activite: item.level === levelFilter}" @tap="setLevelFilter(item.level)"
				v-for="(item, index) in skuLevel">
				<image class="icon" mode="aspectFill" :src="item.icon"></image>
				<view class="title">{{item.title}}</view>
				<view class="odds">{{item.odds.toFixed(2)}}%</view>
			</view>
		</view>

		<view class="sku-list">
			<view class="item" v-for="(item, index) in skus" @tap="showDetailImagePopup(item)">
				<view class="index">
					<template v-if="index < 9">0</template>
					{{index + 1}}
				</view>
				<view class="thumb-c">
					<image class="icon" :src="getLevelIcon(item.level)"></image>
					<image class="thumb" mode="aspectFit" :src="item.thumb"></image>
				</view>
				<view class="item-body">
					<view class="body-title">{{item.title}}</view>
					<!-- <View class="stock">库存: {{item.stock}}</View> 
					<view class="bottom-c">
						<view class="odds">
							{{getLevelTitle(item.level)}} 
							<template v-if="config.show_odds_mode === 'enable'">
								<span class="odds-span">概率{{item.odds}}%</span>
							</template>
							<template v-else-if="config.show_odds_mode === 'auto'">
								<span class="odds-span" v-if="item.odds >= 0.1">概率{{item.odds}}%</span>
								<span class="odds-span" v-else>概率{{"<"}}0.1%</span>
							</template>
						</view>
						<view class="item-price-c">
							<PriceDisplay :info="item"></PriceDisplay>
						</view>
					</view>
					<!-- <view class="odds">
						{{getLevelTitle(item.level)}} 概率 12.2%
					</view>
					<view class="item-price-c">
						<PriceDisplay :info="item"></PriceDisplay>
					</view> -->
				</view>
			</view>
		</view>

		<PayCard :info="payInfo" @close="hidePayPopup" @success="paySuccess" v-if="isPayPopup"></PayCard>

		<uni-popup style="z-index: 1000;" ref="detailPopup" type="bottom">
			<BoxSkuPopup :detailImageList="detailImageList" @close="hideDetailImagePopup"></BoxSkuPopup>
		</uni-popup>
		<!-- <template  v-if="isShowResultPopup">
			<OpenBoxPopup boxImgMode="square" :order="order" @close="goBack" :boxImg="boxImage"></OpenBoxPopup>
		</template> -->
		<OpenBoxPopupTheme2 :config="config" boxImgMode="square" :tryMode="isTryMode" v-if="isShowResultPopup"
			:order="order" @close="goBack" :boxImg="boxImage"></OpenBoxPopupTheme2>

		<template v-if="isNotFound">
			<view class="not-found-c">活动不见了哦~</view>
		</template>

		<SharePopup v-if="isSharePopup" @close="hideSharePopup" :info="posterInfo"></SharePopup>

		<FreeTicketFloatBtn v-if="info.is_invite_enabled" @useFreeTicket="useFreeTicket" :uuid="uuid" nodeType="fudai">
		</FreeTicketFloatBtn>

		<Danmus v-if="danmuSetting.is_enabled" :setting="danmuSetting" :list="danmuList"></Danmus>

		<RecordList v-if="isShowRankList" @close="isShowRankList = false" :skuLevel="skuLevel" :info="info">
		</RecordList>

	</view>
</template>

<script>
	import PayCard from "./components/PayCard.vue"
	import RecordList from "./components/RecordList.vue"

	import {
		mapGetters
	} from "vuex"
	export default {
		components: {
			PayCard,
			RecordList
		},
		data() {
			return {
				uuid: "",
				isInit: false,
				isPayPopup: false,
				info: {},
				order: {},
				pageUuid: '',
				isNotFound: false,
				isShowResultPopup: false,
				danmuSetting: {},
				danmuList: [],
				config: {},
				detailImageList: [],
				levelFilter: 0,
				isTryMode: false,
				isShowRankList: false,
				isSharePopup: false,
			}
		},
		computed: {
			...mapGetters(["userInfo"]),
			bgImage() {
				return 'https://cdn2.hquesoft.com/box/fudai/detail_bg.png'
			},
			boxImage() {
				return this.info.image_3d || 'https://cdn2.hquesoft.com/box/fudai/box.png'
			},
			skuLevel() {
				return this.info.sku_level || []
			},
			skus() {
				if (this.levelFilter) {
					return this.info.skus.filter(item => {
						return item.level === this.levelFilter
					})
				} else {
					return this.info.skus || []
				}
			},
			payInfo() {
				return {
					page_uuid: this.pageUuid,
					title: this.info.title,
					total_list: this.info.total_list,
					money_price: this.info.money_price,
					score_price: this.info.score_price
				}
			},
			titleBgColor() {
				return ''
			},
			discountTips() {
				let totalList = this.info.total_list || []
				for (let i = totalList.length - 1; i >= 0; i--) {
					// 有连开优惠
					if (totalList[i].is_discount) {
						let str = totalList[i].total + '连开优惠'

						if (totalList[i].money_discount) {
							str += (totalList[i].money_discount / 100) + '元'
						}
						if (totalList[i].score_discount) {
							str += totalList[i].score_discount + this.scoreAlias
						}

						return str
					}
				}

				return false
			},
			share() {
				return {
					title: this.info.title,
					thumb: this.info.thumb,
					path: '/pages/fudai/detail?uuid=' + this.info.uuid +
						'&invite_node=fudai-' + this.info.uuid
				}
			},
			posterInfo() {
				return {
					money_price: this.info.money_price,
					score_price: this.info.score_price,
					title: this.info.title,
					path: this.getShareConfig().path,
					thumb: this.info.thumb
				}
			},
		},
		watch: {},
		filters: {},
		onLoad(e) {
			this.uuid = e.uuid

			// 播放音乐
			setTimeout(() => {
				this.refreshCounter++
				if (!this.isBgmLocalDisabled && this.bgmConfig.is_fudai_page_bgm_enabled) {
					this.$playBgm(this.bgmConfig.fudai_page_bgm_src, {
						loop: this.bgmConfig.is_fudai_page_bgm_loop ? true : false
					})
				}
			}, 200)

			uni.$on('startShare', () => {
				this.isSharePopup = true
			})
		},
		onUnload() {

		},
		onPullDownRefresh() {
			this.$showPullRefresh()
			this.initData()
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			})
			this.initData().then(res => {
				this.isInit = true
				uni.hideLoading()

				this.$http('/fudai/change', 'POST', {
					fudai_id: this.info.id
				}).then(res => {
					this.pageUuid = res.data.page_uuid
				})

			}).catch(res => {
				this.isNotFound = true
			})
		},
		onReachBottom() {},
		methods: {
			hideSharePopup() {
				this.isSharePopup = false
			},
			handleTry() {
				uni.showModal({
					title: '试玩提示',
					content: '试玩开出的奖品仅作为演示作用，不可作发货及其它作用',
					confirmText: '同意试玩',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '操作中~'
							})

							this.$http('/fudai/try', 'POST', {
								page_uuid: this.pageUuid,
								total: 1
							}).then(res => {
								uni.hideLoading()
								this.isTryMode = true
								this.paySuccess(res.data, true)
							})
						}
					}
				})
			},
			setLevelFilter(level) {
				if (this.levelFilter === level) {
					this.levelFilter = 0
				} else {
					this.levelFilter = level
				}
			},
			// 使用1次兑换记录
			useFreeTicket() {
				uni.showLoading({
					title: '提交中',
					icon: 'none'
				})

				this.$http('/fudai/order/confirm', 'POST', {
					page_uuid: this.pageUuid,
					total: 1,
					is_use_free_ticket: 1
				}).then(res => {
					uni.hideLoading()
					let info = res.data
					if (info.is_need_pay) {
						uni.showToast({
							title: '兑换出错~',
							icon: 'none'
						})
					} else {
						this.paySuccess(info.order)
					}
				})
			},
			getDanmu() {
				this.$http(`/danmus/fudai_detail?node_id=${this.info.id}`).then(res => {
					this.danmuSetting = res.data.setting
					this.danmuList = res.data.list
				})
			},
			showDetailImagePopup(item) {

				// 有绑定商品，则直接跳转到商品详情
				if (item.product_id) {
					uni.navigateTo({
						url: '/pages/productDetail/index?mode=view&uuid=' + item.product_id
					})
					return false
				}

				if (!item.detail_images || !item.detail_images.length) {
					uni.showToast({
						title: '此款暂无详情~',
						icon: 'none'
					})
					return false
				}
				this.$refs.detailPopup.open('bottom')
				this.detailImageList = item.detail_images || []
			},
			hideDetailImagePopup() {
				this.$refs.detailPopup.close()
				// this.isShowDetail = false
			},
			refresh() {
				this.$store.dispatch("getUserInfo");
			},
			initData() {
				return this.$http(`/fudais/${this.uuid}`, 'GET', {}).then(res => {
					this.info = res.data.info
					this.config = res.data.config

					this.getDanmu()

					uni.setNavigationBarTitle({
						title: this.info.title
					})
				})
			},
			paySuccess(order, isTryMode = false) {
				this.isTryMode = isTryMode
				this.order = order
				this.isPayPopup = false
				this.isShowResultPopup = true
				// 购买成功

				this.refresh()
			},
			goBack() {
				this.isShowResultPopup = false
			},
			hidePayPopup() {
				this.isPayPopup = false
			},
			pay() {
				this.isPayPopup = true
			},
			getLevelIcon(level) {
				return this.skuLevel.find((item) => {
					return item.level === level
				}).icon
			},
			getLevelTitle(level) {
				return this.skuLevel.find((item) => {
					return item.level === level
				}).title
			}
		},
		onPageScroll(e) {}
	}
</script>

<style lang="scss" scoped>
	.not-found-c {
		font-size: 36rpx;
		// font-weight: 500;
		text-align: center;
		color: white;
		line-height: 500rpx;
	}

	.scope-container {
		// padding-top: 150rpx;
		min-height: 100vh;
		box-sizing: border-box;
		padding-top: 180rpx;
		padding-bottom: 80rpx;
		background-size: 100% auto !important;

		/* #ifdef H5 */
		padding-top: 50rpx;
		background-position: 0 -130rpx !important;
		/* #endif */
	}

	.rule-btn {
		width: 100rpx;
		height: 100rpx;
		position: fixed;
		top: 260rpx;
		right: 0rpx;
	}

	.stock-btn {
		width: 100rpx;
		height: 100rpx;
		position: fixed;
		top: 400rpx;
		right: 0rpx;
	}

	.rank-btn {
		width: 90rpx;
		height: 80rpx;
		line-height: 80rpx;
		position: fixed;
		top: 560rpx;
		font-size: 26rpx;
		font-weight: 500;
		right: 0rpx;
		background: #FFEF58;
		// text-align: center;
		padding-left: 30rpx;
		box-sizing: border-box;
		border-radius: 50rpx 0rpx 0rpx 50rpx;
	}


	.float-btn {
		position: fixed;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #000000;
		line-height: 26rpx;
		padding: 0rpx 20rpx;
		z-index: 100;

		&.score-btn {
			left: 30rpx;
		}

		&.chip-btn {
			left: 260rpx;
		}

		// top: ;

		.icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
	}

	.box-image-c {
		text-align: center;

		// margin-top: 130rpx;
		// border: 1px solid red;
		.box-image {
			// border: 1px solid red;
			width: 470rpx;
			height: 470rpx;
		}
	}

	.submit-btn {
		margin: 60rpx auto 0rpx auto;
		width: 600rpx;
		height: 100rpx;
		background: linear-gradient(0deg, #F6EA75, #FFEF58);
		border-radius: 50rpx;

		font-size: 32rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #000000;
		line-height: 100rpx;
		text-align: center;
		position: relative;

		.discount-tips {
			// color: red;
			background: #FF5C5C;
			color: white;
			border-radius: 50rpx;
			// width: 100rpx;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 24rpx;
			padding: 0rpx 20rpx;
			display: inline-block;
			position: absolute;
			top: -26rpx;
			right: 20rpx;
		}
	}

	.price-c {
		font-size: 28rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #000000;
		line-height: 26rpx;
		opacity: 0.8;
		text-align: center;
		margin-top: 30rpx;
	}

	.level-title {
		font-size: 28rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 26rpx;
		margin: 80rpx 46rpx 30rpx 46rpx;
		// padding: 0rpx;
	}

	.level-list {
		display: flex;
		justify-content: space-between;

		margin: 10rpx 20rpx;

		&.list-3 {
			padding: 0rpx 60rpx;
			box-sizing: border-box;
		}

		.item {
			text-align: center;
			padding: 10rpx 30rpx;

			.icon {
				width: 66rpx;
				height: 66rpx;
			}

			.title {
				font-size: 24rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 26rpx;
			}

			.odds {
				font-size: 22rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #FEEF5A;
				line-height: 26rpx;
				margin-top: 4rpx;
			}

			&.activite {
				// border: 1px solid red;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 10rpx;
			}
		}
	}

	.tips-c {
		text-align: center;
		margin-top: 20rpx;
		font-size: 24rpx;
	}

	.sku-list {
		background: #FFFFFF;
		box-shadow: 0px -12rpx 16rpx 0px rgba(130, 130, 130, 0.04);
		border-radius: 30rpx 30rpx 0px 0px;
		padding: 20rpx 30rpx;

		.item {
			display: flex;
			align-items: center;
			padding: 20rpx 10rpx;

			border-bottom: 1rpx solid #EEEEEE;

			.index {
				font-size: 64rpx;
				font-family: AlibabaPuHuiTiR;
				font-weight: 400;
				color: #DDDDDD;
				line-height: 26rpx;
				width: 100rpx;
				flex: 0 0 100rpx;
			}

			.thumb-c {
				position: relative;

				.icon {
					width: 62rpx;
					height: 62rpx;
					position: absolute;
					left: -20rpx;
					top: -20rpx;
					z-index: 10;
				}

				.thumb {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.item-body {
				margin-left: 20rpx;
				// flex: 0 0 0 150rpx;
				height: 130rpx;
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				// align-items: space-between;
				justify-content: space-between;

				// align-items: space;
				.body-title {
					line-height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #000000;
					// line-height: 26rpx;

					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.bottom-c {
					display: flex;
					align-items: center;
					// justify-content: center;
					justify-content: space-between;
					// margin-top: 10rpx;
				}

				.odds-span {
					margin-left: 10rpx;
				}

				.odds {
					font-size: 24rpx;
				}

				.stock {
					margin-top: 10rpx;
					font-size: 24rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #999999;
					// line-height: 26rpx;
					flex-grow: 1;
				}


				.item-price-c {
					text-align: right;
					font-size: 36rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #DECB1A;
					// line-height: 26rpx;
				}
			}
		}
	}
</style>
